<template>
  <div class="book-item-main">
    <div class="flx-row-s-c">
      <h3 class="title" :title="info.name">{{ info.name }}</h3>
      <i class="hot" v-if="info.isTab == 1"></i>
    </div>
    <span class="content" :title="info.meaning != null ? info.meaning : ''">{{
      info.meaning != null ? info.meaning : ""
    }}</span>
    <div class="flx-row-bw-c">
      <div class="looker flx-row-s-c">{{ info.views }}</div>
      <div class="booker flx-row-s-c">{{ info.bookCount }}</div>
    </div>
    <div class="button" @click="toBook">立即预订</div>
  </div>
</template>

<script>
export default {
  name: "VipBookitem",
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    toBook() {
      window.open(`/bookdetail?id=${this.info.id}`, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.book-item-main {
  width: 208px;
  height: 147px;
  background: #ffffff;
  border: 1px solid #eeeded;
  border-radius: 5px;
  padding: 0 14px;
  transition: box-shadow 0.3s, transform 0.3s;
  color: rgba($color: #373737, $alpha: 0.6);

  &:hover {
    @include b-sh;
    transform: translate(0, -7px);
  }

  .title {
    display: inline-block;
    text-align: left;
    max-width: 100%;
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    padding-top: 10px;
    @include f-ell-sin;
    color: #3d3d3d;
  }
  .hot {
    display: inline-block;
    @include size(19px, 27px);
    margin-left: 6px;
    flex-shrink: 0;
    @include bg-setting("hot2");
  }
  .content {
    display: inline-block;
    @include f-ell-sin;
    width: 100%;
    height: 21px;
    margin: 11px 0 8px;
    text-align: left;
  }
  .looker {
    font-size: 12px;
    &::before {
      content: "";
      display: inline-block;
      @include size(24px, 17px);
      margin-right: 5px;
      @include bg-setting("look");
    }
  }
  .booker {
    font-size: 12px;
    &::before {
      content: "";
      display: inline-block;
      @include size(18px, 20px);
      margin-right: 5px;
      @include bg-setting("book");
    }
  }
  .button {
    display: block;
    @include size(100%, 29px);
    color: rgba($color: #3d3d3d, $alpha: 0.9);
    border: 1px solid rgba($color: #616161, $alpha: 0.2);
    @include btn-s(null, 29px, 5px);
    transition: all 0.3s;
    margin-top: 10px;

    &:hover {
      color: rgba($color: #ffffff, $alpha: 0.9);
      border-color: #f9521f;
      background-color: #f9521f;
    }
  }
}
</style>
